<template>
    <div>
        <input type="text" v-model="state.myText">
        <button @click="add">add</button>
        <ul>
            <li v-for="(item,index) in state.datalist" :key="item">
                {{ item }}
                <button @click="del(index)">del</button>
            </li>
        </ul>
    </div>
</template>

<script>
import { reactive } from 'vue'

export default {
    setup () {

        //可以写多个reactive
        const state = reactive({
            myText:"",
            datalist:["111","222","333"]
        })

        const add = ()=>{
            state.datalist.push(state.myText)
            state.myText=""
        }

        const del = (index)=>{
            state.datalist.splice(index,1)
        }

        return{
            state,
            add,
            del
        }
    }
}
</script>

<style>

</style>